<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>博客用户登录</title>
  <script src="/static/js/vue-2.7.14.js"></script>
  <script src="/static/js/axios-1.4.0.js"></script>
  <style>
    body {
      font-family: 'Poppins', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f8f9fa;
      background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    }

    .login-container {
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.1);
      width: 350px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .login-container h2 {
      text-align: center;
      margin-bottom: 25px;
      font-size: 30px;
      color: #333;
      font-weight: 600;
    }

    .login-container input[type="text"],
    .login-container input[type="password"] {
      box-sizing: border-box;
      width: 100%;
      padding: 12px;
      margin-bottom: 20px;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      font-size: 16px;
      transition: border-color 0.3s ease;
    }

    .login-container input[type="text"]:focus,
    .login-container input[type="password"]:focus {
      outline: none;
      border-color: #007BFF;
    }

    .login-container button {
      width: 100%;
      padding: 14px;
      background-color: #007BFF;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      font-weight: 500;
      transition: background-color 0.3s ease;
    }

    .login-container button:hover {
      background-color: #0056b3;
    }

    .error-message {
      color: red;
      margin-top: 15px;
      text-align: center;
      font-size: 14px;
    }

    .options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
      margin-bottom: 25px; /* 增加了这一行，增大与下方元素的间距 */
      font-size: 14px;
    }

    .options label {
      display: flex;
      align-items: center;
    }

    .options input[type="checkbox"] {
      margin-right: 8px;
    }

    .options a {
      color: #007BFF;
      text-decoration: none;
      padding: 8px 12px;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }

    .options a:hover {
      background-color: #e7f3ff;
    }
  </style>

</head>

<body>
<div id="app" class="login-container">
  <h2>欢迎登录博客平台</h2>
  <input v-model="userName" type="text" placeholder="用户名">
  <input v-model="password" type="password" placeholder="密码">
  <div class="options">
    <label>
      <input type="checkbox" v-model="rememberMe"> 记住密码
    </label>
    <div>
      <a href="http://localhost:8080/register">注册用户</a>
      <a href="#" @click.prevent="forgotPassword" style="margin-left: 10px;">忘记密码</a>
    </div>
  </div>
  <button @click="login">登录</button>
  <p class="error-message" v-if="errorMessage">{{ errorMessage }}</p>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      userName: '',
      password: '',
      rememberMe: false,
      errorMessage: ''
    },
    mounted() {
      if (localStorage.getItem('rememberMe') === 'true') {
        this.rememberMe = true;
        this.userName = localStorage.getItem('userName');
        this.password = localStorage.getItem('password');
      }
    },
    methods: {
      login() {
        if (this.rememberMe) {
          localStorage.setItem('rememberMe', 'true');
          localStorage.setItem('userName', this.userName);
          localStorage.setItem('password', this.password);
        } else {
          localStorage.removeItem('rememberMe');
          localStorage.removeItem('userName');
          localStorage.removeItem('password');
        }
        const user = {
          userName: this.userName,
          password: this.password
        };
        axios.post('http://localhost:8080/login', user)
                .then(response => {
                  console.log('登录成功', response.data);
                  this.errorMessage = '';
                })
                .catch(error => {
                  console.error('登录失败', error);
                  this.errorMessage = '用户名或密码错误';
                });
      },
      forgotPassword() {
        console.log('跳转到忘记密码页面');
      }
    }
  });
</script>
</body>

</html>